<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>极目商城后台管理系统</title>
<link href="/ssh/css/forword.css" type="text/css" rel="stylesheet">
<script type="text/javascript">

//删除提示
function confirmDel(str){   
 return confirm(str);   
	} 
//更新订单小项数量	
var xhr;
function updateCount(count,id){
	//通过ajax访问服务器端，传回页面数据
	if(window.ActiveXOject){
		//当浏览器为IE5以下时，要使用ActiveX方式创建对象
		xhr=new ActionXObject("Microsoft.XMLHTTP");
	}else if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else{			
		return;
	}
	//用post方法打开服务器端
	xhr.open("post","updateOrderItem.action");
	xhr.setRequestHeader("If-Modified-Since","0");
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置为中文
	xhr.send("count="+count+"&id="+id);	
}
//传回总价，更新订单
function updateTotalprice(totalprice,id){
	//通过ajax访问服务器端，传回页面数据
	if(window.ActiveXOject){
		//当浏览器为IE5以下时，要使用ActiveX方式创建对象
		xhr=new ActionXObject("Microsoft.XMLHTTP");
	}else if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else{			
		return;
	}
    xhr.onreadystatechange=callback;
	//用post方法打开服务器端
	xhr.open("post","updateOrder.action");
	xhr.setRequestHeader("If-Modified-Since","0");
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置为中文
	xhr.send("totalprice="+totalprice+"&id="+id);
}
function callback(){
	//alert("回调函数执行");
	//5.根据服务器返回结果，处理客户端
	//如果服务器端执行完毕
	 if(xhr.readyState == 4){
		//如果结果为执行成功
		if(xhr.status == 200){
			var ret=xhr.responseText;
			//alert(ret);
			//indexOf没有就是-1，有就从0开始
			if(ret.indexOf("yes") != -1){
				//alert("该商品已经存在，不能再次输入");
				alert("订单提交成功！欢迎再次选购。");
			}

		}else if(xhr.status == 404) {
			alert(404);
		}
	} 	
	
}
//提交总价之前的数据准备
function submitTotal(){
	var id2=document.getElementById("id2");
	var totalprice=id2.innerHTML;
	var id3=document.getElementById("id3");
	var id=id3.innerHTML;
	updateTotalprice(totalprice,id);
}
//减少数量
function decrease(btnObj){
	var nodes=btnObj.parentNode.childNodes;
	var nodes1=(btnObj.parentNode).parentNode;
	var id=nodes1.getElementsByTagName("td")[0].innerHTML;
	var newCount=null;
	for(var i=0;i<nodes.length;i++){
		if(nodes[i].nodeName=="INPUT"&&nodes[i].type=="text"){
			var oldCount=parseInt(nodes[i].value);
			if(oldCount>=2){
			newCount=oldCount-1;	
			nodes[i].value=newCount;
			updateCount(newCount,id);
			}
		}
	}
	caluclate();	
}
//增加数量
function increase(btnObj){
	var nodes=btnObj.parentNode.childNodes;
	var nodes1=(btnObj.parentNode).parentNode;
	var id=nodes1.getElementsByTagName("td")[0].innerHTML;
	var newCount=null;
	var nodes2=(btnObj.parentNode).parentNode;
	var maxCount=nodes2.getElementsByTagName("td")[3].innerHTML;
	for(var i=0;i<nodes.length;i++){
		if(nodes[i].nodeName=="INPUT"&&nodes[i].type=="text"){
			var oldCount=parseInt(nodes[i].value);
			if(oldCount==maxCount){
				alert("库存只有这些了，感谢购买，改天再来看吧！");
			}
			if(oldCount>maxCount){
				alert("库存没有这么多了，这次少买些，改天再来看吧！");
			}
			if(oldCount<maxCount){
				newCount=oldCount+1;	
				nodes[i].value=newCount;
				updateCount(newCount,id);	
			}
		}
	}
	caluclate();
}
//计算小计及总价
function caluclate(){
	var total=0;
	//得到所有的行
	var tableObj=document.getElementById("shoppingCart");
	var trNodes=tableObj.getElementsByTagName("tr");
	//从第三行开始统计，不统计最后一行
	for(var i=2;i<trNodes.length-1;i++){
		var tr=trNodes[i];
		//得到单价和数量
		var price=tr.getElementsByTagName("td")[4].innerHTML;
		var quantity=tr.getElementsByTagName("INPUT")[1].value;
		//计算小计并显示
		var sum=parseFloat(price)*parseFloat(quantity);
		tr.getElementsByTagName("td")[6].innerHTML=sum.toFixed(2);
		//总价
		total+=sum;
	}
	//显示总价
	trNodes[trNodes.length-1].getElementsByTagName("td")[1].innerHTML=total.toFixed(2);
}
</script>
<!-- 样式表外部引入 -->
<style type="text/css">
</style>
</head>
<body> 
<!-- 头部包含文件 -->
<%@include file="../commonq/myhead.jsp" %>
 <table class="main" >
	<tr>
		<td style="width:200px;vertical-align:top;background:#D2D7D5;">
				<%@include file="../commonq/mymenu.jsp" %>	 
		</td>
		<td style="vertical-align:top;" align="center">
		<div style="margin-top:0px;"> 
		<h2>我的购物车</h2>
		 <s:if test="order==null">
		 <p style="color:red;font-size:20px;">您还没有选购过商品，赶紧去挑一些吧！</p>
		 </s:if>
		 <s:else>
		   <table class="listTbl" id="shoppingCart">
		        <tr>
		          <th colspan="3" style="text-align:lift">订单编号:</th>
		          <th id="id3"><s:property value="order.id"/></th>
		          <th colspan="4">顾客账号:${sessionScope.user}</th>
		        </tr>
				<tr>
				    <th>订单项编号</th>
					<th>商品图片</th>
					<th>商品名称</th>
					<th>商品库存</th>
					<th>商品价格</th>
					<th>购买数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
				<s:iterator value="order.orderitems">
					<!-- value值必须使用jQuery 才能传到后台-->
				<tr>
					<td><s:property value="id"/></td>
					<td>
						<img style="height:80px" alt="<s:property value="product.productname"/>" src="/ssh/photo/product/<s:property value="product.photo"/>">
					</td>
					<td>
						<s:property value="product.productname"/>
					</td>
					<td><s:property value="product.productNum"/></td>
					<td style="text-align:right;"><s:property value="product.nowprice"/></td>
					<td style="text-align:right;width:230px;">
					<input type="button" value="-" onclick="decrease(this)">
					<input type="text" value="<s:property value="count"/>">
					<input type="button" value="+" onclick="increase(this)">
					</td>
					<td>
					</td>
					<td style="text-align:center;">
						<!-- <a href="">修改</a> -->
						<a href="deleteItem.action?id=<s:property value="id" /> " onclick="return confirmDel('确定要删除吗')">删除</a>
					</td>
				</tr>
				</s:iterator>
				<tr>
				   <td colspan="6">总计:</td>
				   <td id="id2"></td>
				   <td style="text-align:center;width:150px;">
				   <input type="button" value="结算" onclick="caluclate()">
				   <input type="button" value="提交" onclick="submitTotal()">
				   <!-- <a href="toBuyCar.action" onclick="submitTotal()">提交</a> -->
				   <a href="delOrder.action?id=<s:property value="order.id" /> " onclick="return confirmDel('确定要删除整个订单吗')">删除</a>
				   </td>
				</tr>
				<%-- </s:iterator> --%>
			</table>
			<p>请确认个人关键信息（如果没有，请完善个人信息）！</p>
			<table>
			   <tr>
			     <td>手机号码：</td>
			     <td><s:property value="%{#session.mobile}"/></td>
			   </tr>
			   <tr>
			     <td>收货地址：</td>
			     <td><s:property value="%{#session.address}"/></td>
			   </tr>
			   <tr>
			     <td><input type="button" value="确认地址并提交订单" onclick="window.location.href='toBuyCar.action'"></td>
			     <td><a href="toModiUser.action?id=${sessionScope.userId }">去修改或完善</a></td>
			   </tr>
			</table>
			</s:else>
			<!-- <a href="">结算</a> -->
			</div>
		</td>
	</tr>
</table>
<%@include file="../commonq/tail.jsp" %>
</body>
</html>